import { InfoCircleOutlined } from '@ant-design/icons';
import { Col, Row, Tooltip } from 'antd';
import { history } from 'umi';
import React from 'react';
import numeral from 'numeral';
import { ChartCard } from './Charts';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 7,
  style: {
    marginBottom: 24,
  },
};

const go2Vip = (type) =>{
  history.push(`/vip/center?type=${type}`);
}
const IntroduceRow = ({ loading, allcount }) => (
  <Row gutter={24} type="flex">
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="最近未来上课"
        action={
          <Tooltip
            title="最近未来上课"
          >
            <InfoCircleOutlined />
          </Tooltip>
        }
        loading={loading}
        total={<a onClick={()=>go2Vip("1")}>{numeral(allcount.futureClassesCount).format('0,0')}</a>}
        contentHeight={46}
      >
      </ChartCard>
    </Col>
    <Col span={1}></Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="最近会员到期"
        action={
          <Tooltip
            title="最近会员到期"
          >
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={<a  onClick={()=>go2Vip("2")}>{numeral(allcount.memberExpirationCount).format('0,0')}</a>}
        contentHeight={46}
      >
      </ChartCard>
    </Col>
    <Col span={1}></Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        loading={loading}
        title="最近生日"
        action={
          <Tooltip
            title="最近生日"
          >
            <InfoCircleOutlined />
          </Tooltip>
        }
      total={<a onClick={()=>go2Vip("3")}>{numeral(allcount.memberBirthdayCount).format('0,0')}</a>}
        contentHeight={46}
      >
      </ChartCard>
    </Col>
    {/* <Col span={1}></Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        loading={loading}
        bordered={false}
        title="本月即将失效会员数"
        action={
          <Tooltip
            title="本月即将失效会员数"
          >
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={<a onClick={()=>go2Vip("4")}>{numeral(allcount.invalidCount).format('0,0')}</a>}
        contentHeight={46}
      >
      </ChartCard>
    </Col>
    <Col span={1}></Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        loading={loading}
        bordered={false}
        title="未绑卡会员数"
        action={
          <Tooltip
            title="未绑卡会员数"
          >
            <InfoCircleOutlined />
          </Tooltip>
        }
        total={<a onClick={()=>go2Vip("5")}>{numeral(allcount.notCardCount).format('0,0')}</a>}
        contentHeight={46}
      >
      </ChartCard>
    </Col> */}
  </Row>
);

export default IntroduceRow;
